<!-- 附件属性设置 -->
<template>
  <div>
    <Form :model="formData" :rules="ruleValidate" ref="form" :label-width="100">
      <Row :gutter="32">
        <Col span="20">
          <Form-item prop="isShow" :label="'是否显示'">
            <RadioGroup v-model="formData.isShow">
              <Radio :label="1">是</Radio>
              <Radio :label="0">否</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="20" v-if="formData.isShow">
          <Form-item prop="require" :label="'是否必传'">
            <RadioGroup v-model="formData.require">
              <Radio :label="1">必传</Radio>
              <Radio :label="0">非必传</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" v-if="formData.isShow">
        <Col span="20">
          <Form-item prop="fileType" :label="'附件格式'">
            <CheckboxGroup v-model="formData.fileType" size="default" @on-change="onChange">
              <Checkbox v-for="item in FILE_OPTIONS" :label="item.value" :key="item.value">{{ item.label }}</Checkbox>
            </CheckboxGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" v-if="formData.isShow">
        <Col span="16">
          <Form-item prop="limit" :label="'上传个数'">
            <div class="upload">
              <InputNumber
                placeholder="请输入个数"
                v-model="formData.limit"
                style="width: 120px;"
                :disabled="formData.noLimit"
                :min="0"
                :precision="0"
              ></InputNumber>
              <Checkbox v-model="formData.noLimit">不限制</Checkbox>
            </div>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { FILE_OPTIONS } from '../../../const/applyForm/fieldItem'
export default {
  data() {
    return {
      FILE_OPTIONS: FILE_OPTIONS,
      formData: {
        isShow: 0,
        type: 6,
        require: 0,
        fileType: [],
        limit: null,
        noLimit: true
      },
      ruleValidate: {
        isShow: [{ required: true, type:'number', message: '请选择是否显示', trigger: 'blur' }],
        require: [{ required: true, type:'number', message: '请选择是否必传', trigger: 'blur' }],
        fileType: [{ required: true, type:'array', message: '请选择附件格式', trigger: 'blur' }],
      },
      lastFileType: []
    }
  },
  props: {
    attributes: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    onChange(value) {
      const NO_LIMIT = 7
      if (this.lastFileType.includes(NO_LIMIT)) {
        //上一次选中了不限制
        if (value.includes(NO_LIMIT)) {
          this.formData.fileType = value.filter(item => item !== NO_LIMIT)
          this.lastFileType = JSON.parse(JSON.stringify(this.formData.fileType))
        } else {
          this.lastFileType = JSON.parse(JSON.stringify(value))
        }
      } else {
        //上一次限制
        if (value.includes(NO_LIMIT)) {
          this.formData.fileType = [NO_LIMIT]
        }
        this.lastFileType = JSON.parse(JSON.stringify(value))
      }
    }
  },

  created() {
    if (Object.keys(this.attributes).length) {
      this.formData = this.attributes
      this.lastFileType = JSON.parse(JSON.stringify(this.formData.fileType))
    }
    this.$emit('SetTitle', '附件设置')
    this.$emit('SetPageMinHeight', '100')
    this.$emit('SetPageActions', [
      {
        text: '确定',
        theme: 'primary',
        handle: () => {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$emit('Close', this.formData)
            }
          })
        }
      },
      {
        text: '取消',
        handle: () => {
          this.$emit('Close')
        }
      }
    ])
    //  this.$emit("SetPageMinHeight", 200);
    //  this.$emit("SetPageWidth", 1000);
  }
}
</script>

<style lang="less" scoped>
.ivu-checkbox-group {
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
}
.upload {
  display: flex;
  .ivu-checkbox-wrapper {
    width: 110px;
    margin-left: 30px;
  }
}
</style>
